<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>index</title>
    <link href="css/index.css" rel="stylesheet">
    <link href="Font-Awesome-3.2.1/css/font-awesome.min.css" rel="stylesheet">
    <!--[if IE]>
    <link href="Font-Awesome-3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet" />
    <![endif]-->
</head>
<body>
    <footer>
        <figure class="title_img"></figure>
            <div class="bga">
                <h4>Hello, my name is John Doe and I am</h4>
                <h2>FULL STACK WEB DEVELOPER</h2>
                <h3>creating modern and responsive Web Application</h3>
                <div class="circle">
                    <img src="img/down.png">
                </div>
            </div>
    </footer>
    <main>
        <nav id="menu">
            <h1 class="tit_name">John Doe</h1>
            <ul class="navbar">
                <li>home</li>
                <li>services</li>
                <li>works</li>
                <li>skills</li>
                <li>testimonials</li>
                <li>contact</li>
            </ul>
        </nav>
        <section>
            <h1>THIS IS WHAT I DO</h1>
            <div class="straight_line"></div>
            <p>
                No one lights a lamp in order to hide it behind the door: the<br>
                purpose of light is to create more light, to open people’s eyes, to<br>
                reveal the marvels around.
            </p>
        </section>

        <figure class="fig">
            <div class="first">
                <img src="img/star.png"/>
                <h5>WEB DESIGN</h5>
                <dd>
                    Good things come to those who<br>
                    wait, but only the things left by<br>
                    those who hustle
                </dd>
            </div>

            <div class="first marginleft_1">
                <img src="img/find.png"/>
                <h5>WEB PROGRAMMING</h5>
                <dd>
                    Good things come to those who<br>
                    wait, but only the things left by<br>
                    those who hustle
                </dd>
            </div>

            <div class="first marginleft_1">
                <img src="img/medal.png"/>
                <h5>BRANDING</h5>
                <dd>
                    Good things come to those who<br>
                    wait, but only the things left by<br>
                    those who hustle
                </dd>
            </div>

            <div class="first marginleft_1">
                <img src="img/question_mark.png"/>
                <h5>CONSULTATION</h5>
                <dd>
                    Good things come to those who<br>
                    wait, but only the things left by<br>
                    those who hustle
                </dd>
            </div>
        </figure>
        <article>
            <section>
                <h1>MY WORKS</h1>
                <div class="straight_line"></div>
                <p>
                    No one lights a lamp in order to hide it behind the door: the<br>
                    purpose of light is to create more light, to open people’s eyes, to<br>
                    reveal the marvels around.
                </p>
            </section>

            <section>
                <div class="poto">
                    <img src="img/item-1.jpg"/>
                    <div class="poto_masking ">
                        <span class="tit_name">CRAZY <b>SHARK</b></span>
                        <div class="div_none">
                            <p class="txt_content">
                                LILY LIKES TO PLAY WITH<br>
                                CRAYONS AND PENCILS
                            </p>
                        </div>
                        <div class="line line1"></div>
                        <div class="line line2"></div>
                        <div class="vertical_line ve1"></div>
                        <div class="vertical_line ve1 ve2"></div>
                    </div>
                </div>
                <div class="poto">
                    <img src="img/item-2.jpg"/>
                    <div class="poto_masking ">
                        <span class="tit_name">CRAZY <b>SHARK</b></span>
                        <div class="div_none">
                            <p class="txt_content">
                                LILY LIKES TO PLAY WITH<br>
                                CRAYONS AND PENCILS
                            </p>
                        </div>
                        <div class="line line1"></div>
                        <div class="line line2"></div>
                        <div class="vertical_line ve1"></div>
                        <div class="vertical_line ve1 ve2"></div>
                    </div>
                </div>
                <div class="poto">
                    <img src="img/item-3.jpg"/>
                    <div class="poto_masking ">
                        <span class="tit_name">CRAZY <b>SHARK</b></span>
                        <div class="div_none">
                            <p class="txt_content">
                                LILY LIKES TO PLAY WITH<br>
                                CRAYONS AND PENCILS
                            </p>
                        </div>
                        <div class="line line1"></div>
                        <div class="line line2"></div>
                        <div class="vertical_line ve1"></div>
                        <div class="vertical_line ve1 ve2"></div>
                    </div>
                </div>
                <div class="poto top_2em">
                    <img src="img/item-4.jpg"/>
                    <div class="poto_masking ">
                        <span class="tit_name">CRAZY <b>SHARK</b></span>
                        <div class="div_none">
                            <p class="txt_content">
                                LILY LIKES TO PLAY WITH<br>
                                CRAYONS AND PENCILS
                            </p>
                        </div>
                        <div class="line line1"></div>
                        <div class="line line2"></div>
                        <div class="vertical_line ve1"></div>
                        <div class="vertical_line ve1 ve2"></div>
                    </div>
                </div>
                <div class="poto top_2em">
                    <img src="img/item-5.jpg"/>
                    <div class="poto_masking ">
                        <span class="tit_name">CRAZY <b>SHARK</b></span>
                        <div class="div_none">
                            <p class="txt_content">
                                LILY LIKES TO PLAY WITH<br>
                                CRAYONS AND PENCILS
                            </p>
                        </div>
                        <div class="line line1"></div>
                        <div class="line line2"></div>
                        <div class="vertical_line ve1"></div>
                        <div class="vertical_line ve1 ve2"></div>
                    </div>
                </div>
                <div class="poto top_2em">
                    <img src="img/item-6.jpg"/>
                    <div class="poto_masking ">
                        <span class="tit_name">CRAZY <b>SHARK</b></span>
                        <div class="div_none">
                            <p class="txt_content">
                                LILY LIKES TO PLAY WITH<br>
                                CRAYONS AND PENCILS
                            </p>
                        </div>
                        <div class="line line1"></div>
                        <div class="line line2"></div>
                        <div class="vertical_line ve1"></div>
                        <div class="vertical_line ve1 ve2"></div>
                    </div>
                </div>
            </section>
        </article>


        <section class="gray_module">
            <h1>MY SKILLS</h1>
            <div  class="straight_line"></div>
            <p>
                No one lights a lamp in order to hide it behind the door: the purpose<br>
                of light is to create more light, to open people’s eyes, to<br>
                reveal the marvels around.
            </p>
            <div class="circle_div">
                <div class="circle_canvas">
                <span id="mycanvas">
                    <canvas id="mycanvas1" width="180px" height="180px"></canvas>
                </span>
                    <span class="percent">80%</span>
                    <span>PROGRAMMING</span>
                </div>

                <div class="circle_canvas">
                <span>
                    <canvas id="mycanvas2" width="180px" height="180px"></canvas>
                </span>
                    <span class="percent">90%</span>
                    <span>DESIGN</span>
                </div>

                <div class="circle_canvas">
                <span>
                    <canvas id="mycanvas3" width="180px" height="180px"></canvas>
                </span>
                    <span class="percent">85%</span>
                    <span>MARKETING</span>
                </div>

                <div class="circle_canvas">
                <span>
                    <canvas id="mycanvas4" width="180px" height="180px"></canvas>
                </span>
                    <span class="percent">95%</span>
                    <span>UI&ensp;/&ensp;UX</span>
                </div>
            </div>
        </section>
        <section>
            <div class="bg_img">
                <div>ARE YOU READY TO START?</div>
                <h2>I'm available for freelance projects.</h2>
                <input type="button" value="HIRE&ensp;ME">
            </div>
        </section>

        <section>
            <h1>WHAT MY CLIENTS SAY</h1>
            <div class="straight_line"></div>
            <p>
                No one lights a lamp in order to hide it behind the door: the<br>
                purpose of light is to create more light, to open people’s eyes, to<br>
                reveal the marvels around.
            </p>

            <div class="Carousel">
                <div class="progress_line"></div>
                <div class="part disB">
                <span>
                    Work with John was a pleasure. He understood exactly what I wanted<br>
                    and created an awesome site for my company.
                  <dd class="author">  &mdash;&ensp;Pino Caruso</dd>
                </span>
                    <img src="img/client-1.jpg"/>
                </div>

                <div class="part part_none">
                <span>
                    I'm really happy with the results. Get 100% satisfaction is difficult but Alex<br>
                    got it without problems.
                    <dd class="author"> &mdash;&ensp;Jane Doe</dd>
                </span>
                    <img src="img/client-2.jpg"/>
                </div>
            </div>
        </section>

        <section class="my_from">
            <h1>DROP ME A LINE</h1>
            <div class="straight_line"></div>
            <p>
                No one lights a lamp in order to hide it behind the door: the<br>
                purpose of light is to create more light, to open people’s eyes, to<br>
                reveal the marvels around.
            </p>
            <div class="submit_from">
                <input type="text" placeholder="&ensp;&ensp;Name"/><br>
                <input type="text" placeholder="&ensp;&ensp;E-mail"/><br>
                <textarea  placeholder="Message">
                </textarea><br>
                <input class="sub_bnt" type="button" value="SEND&ensp;&ensp;MESSAGE">
               <!-- <span>Please fix the errors and try again.</span>-->
            </div>
        </section>

        <footer class="foo">
            <div class="mag">
                <div class="ico_share">
                    <span class="fa icon-facebook"></span>
                    <span class="fa icon-twitter"></span>
                    <span class="fa icon-google-plus"></span>
                    <span class="fa icon-pinterest"></span>
                    <span class="fa icon-envelope"></span>
                </div>
                <div>Made with in Nottingham</div>
                <div class="color_red">© 2015 John Doe | Images: <span>Unsplash</span>&ensp;&&ensp;<span>Zoomwalls</span></div>
            </div>

        </footer>

    </main>

    <script src="js/jquery-2.1.1.js"></script>
    <script src="js/index.js"></script>
</body>
</html>